<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	request.setAttribute("webApp", basePath);
	request.setAttribute("lib",basePath+"lib/");
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>客服</title>
	<script type="text/javascript" src="${lib}jquery/1.11.3/jquery.min.js"></script>
	<script type="text/javascript" src="${lib}jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
	<link rel="stylesheet" href="${webApp}/layui/css/layui.css">
	<script src="${webApp}layui/layui.js"></script>
	<script type="text/javascript">
		var webApp="${webApp}";
	</script>
	<script type="text/javascript">
		var layim_kf_chat_isLoad=false;
		jQuery.fn.kefu=function(lt_server,conf){
			var ws;
			var socket_server="ws://127.0.0.1:8080/Jstx/client.c";
			var user_img="./lib/imgs/def_user_img.png";
			var system_img="./lib/imgs/luntan_logo.png";
			var lt_logs=layui.cache.dir + 'css/modules/layim/html/chatlog.html';
			var form_user={};
			var to_user={};
			var conf_form_user=function(f){
				form_user={
				        "username": f.nickName //我的昵称
				            ,"id": f.uuid //我的ID
				            ,"status": "online" //在线状态 online：在线、hide：隐身
				            ,"remark": "" //我的签名
				            ,"avatar": user_img //用户头像头像
				          };
			};
			var conf_to_user=function(t){
				to_user={
					    name:	t.name
					    ,type: 'kefu'
					    ,avatar: system_img
					    ,id: t.uuid
					};
			};
			var open_chat=function(layim){
				layim.chat(to_user);
			};
			var init_layim_tools=function(layim){
				//创建工具
				layim.on('tool(a)', function(insert, send, obj){ //事件中的tool为固定字符，而code则为过滤器，对应的是工具别名（alias）
				  layer.prompt({
				    title: '插入链接'
				    ,formType: 2
				    ,shade: 0
				  }, function(text, index){
				    layer.close(index);
				    insert('a('+text+')[链接:'+text+']'); //将内容插入到编辑器，主要由insert完成
				    send(); //自动发送
				  });
				});
			};
			var conf_event_for_layim=function(layim,ws){
				layim.on('sendMessage', function(res){
					  var req={
							  method:"send_kefu",
							  params:{
								  form:res.mine.id,
								  content:res.mine.content,
								  to:res.to.id
							  }
					  };
					  if(ws!=undefined){
						 ws.send(JSON.stringify(req));
					  }else{
						  ws.onerror("未检测到websocket连接");
					  }
				});
			};
			var conf_layim=function(layim,ws){
				init_layim_tools(layim);//创建工具
				conf_event_for_layim(layim,ws);//注册事件
				//初始化客服信息配置
				layim.config({
				    //配置客户信息
				    init: {
				      //配置客户信息
				      mine:form_user
				    }
				    //上传图片接口
				    ,uploadImage: {
				      url: lt_server+'upload/img.c' //（返回的数据格式见下文）
				      ,type: 'post' //默认post
				    }
				    //上传文件接口
				    ,uploadFile: {
				      url: lt_server+'/upload/file.c' //（返回的数据格式见下文）
				      ,type: 'post' //默认post
				    }
				    //扩展工具栏
				    ,tool: [
				    	{
					    	alias: 'a' //工具别名
						    ,title: '链接' //工具名称
						    ,icon: '&#xe64d;' //工具图标，参考图标文档
					  	}
				    ]
				    ,brief: false //是否简约模式（若开启则不显示主面板）
				    ,notice: true //是否开启桌面消息提醒，默认false
				    ,voice: 'default.wav' //声音提醒，默认开启，声音文件为：default.wav
				    ,chatLog: lt_logs
				  });
			};
			//running...
			layui.use(['layim','layer'], function(layim,layer){
				if(layim_kf_chat_isLoad){//O(∩_∩)O 哈哈 ~
					$(".layui-layer-content>span").click();//暂时就这样吧,找不到显示方法
					return;
				}
				ws=new WebSocket(socket_server);
				ws.onopen=function(e){
					//init user
					ws.send(JSON.stringify({
							method: 'init_client' //随便定义，用于在服务端区分消息类型
						    ,params: {
						    	cookie:null//此处后期会进行获取 本地缓存操作,然后方便从数据库中读取历史记录
						    }
					}));
					//后续两个步骤
					
					//conf layim window
					//open chat
				};
				ws.onerror=function(e){
					console.log("WebSocket connect error:"+e);
					layer.msg("与客服通信出现异常,具体错误信息请浏览控制台");
				};
				ws.onclose=function(e){
					layim.getMessage({
						  system: true //系统消息
						  ,id: to_user.id //聊天窗口ID
						  ,type: "kefu" //聊天窗口类型
						  ,content: "与服务器连接已断开..."
					});
					//layim.setChatMin(); //收缩聊天面板
					//layer.msg("已关闭与客服人员的聊天");
				};
				ws.onmessage=function(e){
					if(e.data!=undefined||e.data!=""){
						var r= JSON.parse(e.data);
						if(r.state=="success"){
							switch(r.method){
								case "no_kefu":
									
									break;
								case "init_result"://已加入 分配客服
									conf_form_user(r.form);//配置form
									conf_to_user(r.to);//配置 to
									conf_layim(layim,ws);//配置layim
									open_chat(layim);//open chat
									layim.setChatStatus("<span style='color:#5FB878;'>在线</span>");
									layim_kf_chat_isLoad=true;//记录当前窗体已打开,避免由于在此单击窗体打开按钮重复创建会话
									break;
								case "send_result":
									//暂不处理
									if(r.send_result==500){
										layim.getMessage({
											  system: true //系统消息
											  ,id: to_user.id //聊天窗口ID
											  ,type: "kefu" //聊天窗口类型
											  ,content: "发送失败了,再试试吧。"
										});
									}else if(r.send_result==503){
										layim.getMessage({
											  system: true //系统消息
											  ,id: to_user.id //聊天窗口ID
											  ,type: "kefu" //聊天窗口类型
											  ,content: to_user.name+" 下线了,你发的信息他看不到。"
										});
									}
									else{
										console.log("Info:发送成功...");	
									}
									break;
								case "received_kefu_info":
									//收到客服信息
									layim.getMessage({
								        	   username: to_user.name
											  ,id: to_user.id //聊天窗口ID   
											  ,avatar: system_img 
											  ,type: "kefu" //聊天窗口类型
											  ,content:r.result.content
										});
									break;
								case "kefu_xiaxian":
									//客服下线
									layim.getMessage({
											  system: true //系统消息
											  ,id: to_user.id //聊天窗口ID
											  ,type: "kefu" //聊天窗口类型
											  ,content: to_user.name+" 有事出去啦,等他回来再跟他联系吧。"
										});
									layim.setChatStatus("<span style='color:#FF5722;'>离线</span>");
									break;
								case "kefu_shangxian":
									layim.getMessage({
										  system: true //系统消息
										  ,id: to_user.id //聊天窗口ID
										  ,type: "kefu" //聊天窗口类型
										  ,content: to_user.name+"上线了。。。"
									});
									layim.setChatStatus("<span style='color:#5FB878;'>在线</span>");
									break;
							}
						}else{
							layer.msg(r.err);
							console.log("Error code:"+r.errCode);
						}
					}else{
						layer.msg("出错了,获取客服人员给你的回复出了点问题,请您改天再联系吧...");
					}
				};
			});
		};
	</script>

	<script type="text/javascript">
		/* 调用方法 */
		$(function(){
			$(".btn").click(function(){
				$(".btn").kefu(webApp);
			});
		});
	</script>

  </head>
  
  <body style="height:1024px;background: #fff;">
   	<button class="btn" style="width: 300px;height:300px;">连接客服</button>
   	
   	
  </body>
</html>
